<template>
  <el-form :model="form" ref="form" :rules="rules" class="form">
    <el-form-item class="form-item">
      <el-input placeholder="用户名手机" v-model="username"> </el-input>
    </el-form-item>

    <el-form-item class="form-item">
      <el-input placeholder="验证码" v-model="captcha">
        <template slot="append">
          <el-button @click="handleSendCaptcha"> 发送验证码 </el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item class="form-item">
      <el-input
        placeholder="设置新密码"
        type="password"
        v-model="password"
      ></el-input>
    </el-form-item>

    <el-form-item class="form-item">
      <el-input
        placeholder="确认新密码"
        type="password"
        v-model="checkPassword"
      >
      </el-input>
    </el-form-item>

    <el-button class="submit" type="primary" @click="handleRegSubmit">
      重置
    </el-button>
  </el-form>
</template>
  
  <script>
export default {
  data() {
    return {
      username: "",
      password:"",
      captcha:'',
      checkPassword:'',

      //telephone: "",
    };
  },
  methods: {
    handleRegSubmit(){
      this.$confirm(`该功能后续实现，请先联系管理员重置密码`, "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
    },
    handleSendCaptcha() {
      if (!this.username) {
        return this.$message({
          message: "请输入手机号码",
          type: "warnimg",
        });
      }

      if (this.username.length !== 11) {
        this.$confirm("手机号码格式错误", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
        return;
      }

      this.$axios({
        url: "captchas",
        method: "post",
        data: {
          tel: this.username,
        },
      }).then((ans) => {
        console.log("验证码", ans.data.code);
        const code = ans.data.code;
        console.log("验证码", `模拟手机验证码为：${code}`);
        this.$confirm(`模拟手机验证码为：${code}`, "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
      });
    },
    resetPassword() {
      // 向服务器发送请求，重置密码
      axios
        .post("/reset_password", {
          username: this.username,
          email: this.email,
        })
        .then((response) => {
          // 重置密码成功，跳转到登录页面
          this.$router.push("/login");
        })
        .catch((error) => {
          // 重置密码失败，显示错误信息
          console.error(error);
          alert("重置密码失败，请检查用户名和邮箱是否正确");
        });
    },
  },
};
</script>

<style>
.login-form {
  padding: 20px;
}

.login-btn {
  width: 100%;
}
</style>